/* type:
1修改店铺联系方式发送验证码;
2入店铺发送验证码;
3管理员修改手机发送验证码;
4管理员修改登录密码发送验证码;
5管理员忘记登录密码重置发送验证码 */

<style scoped>
</style>
<template>
  <div class="h100 p20 abs w100 bg-white" style="z-index:999;left:0;top:0;">
    <van-icon @click="close" name="arrow-left" size="22"/>
    <div class="center">
      <br>
      <br>
      <br>
      <h3 class="f20" v-show="type===0">设置密码</h3>
      <h3 class="f20" v-show="type===1">修改密码</h3>
      <h3 class="f20" v-show="type===2">验证密码</h3>
      <br>
      <br>
      <p>请输入支付密码，以验证身份</p>
      <br>
      <br>
      <br>
    </div>
    <!-- 密码输入框 -->
    <van-password-input
      :value="form.value"
      info="密码为 6 位数字"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import { setPayPwd, updatePayPwd, payPwdIsRight } from "@/http/api";
export default {
  props: {
    type: {
      type: Number, // 0:设置,1:修改，2:验证
      default: 2
    }
  },
  data() {
    return {
      form: {
        value: ""
      },
      showKeyboard: true
    };
  },
  created() {},
  methods: {
    // 软键盘交互
    onInput(key) {
      this.form.value = (this.form.value + key).slice(0, 6);
      if (this.form.value.length === 6) {
        this.submit();
      } else {
        return;
      }
    },
    onDelete() {
      this.form.value = this.form.value.slice(0, this.form.value.length - 1);
    },
    // 请求
    submit() {
      let toastNew = this.$toast.loading({
        message: "验证中...",
        forbidClick: true
      });
      if (this.type === 0) {
        setPayPwd({ payPwd: this.form.value }).then(res => {
          if (res.code === 200) {
            this.$emit("validationPwd", true);
            this.close();
          } else {
            this.form.value = "";
            this.showKeyboard = true;
            this.Toast.error({
              iconUrl: "../../../static/img/logo.png",
              position: "topCenter",
              message: res.msg
            });
          }
          toastNew.clear();
        });
      }
      if (this.type === 1) {
        updatePayPwd({ payPwd: this.form.value }).then(res => {
          if (res.code === 200) {
            this.$emit("validationPwd", true);
            this.close();
          } else {
            this.form.value = "";
            this.showKeyboard = true;
          }
          toastNew.clear();
        });
      }
      if (this.type === 2) {
        payPwdIsRight({ payPwd: this.form.value }).then(res => {
          if (res.code === 200) {
            this.$emit("validationPwd", true);
            this.close();
          } else {
            this.form.value = "";
            this.showKeyboard = true;
          }
          toastNew.clear();
        });
      }
    },
    close() {
      this.$emit("validationClose", true);
    }
  }
};
</script>

